const HtmlWebpackPlugin = require("html-webpack-plugin");
const { resolve } = require("path");

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin()
    ],
    mode:'development',
    //devServer:用来自动化编译(自动打开浏览器，刷新浏览器)
    //特点：只会在内存中编译打包，不会有任何输出
    // 指令: npx webpack-dev-server
    devServer:{
        static : {directory: resolve(__dirname,'build')},
        watchFiles:['./src/index.html'],
        //启动gzip压缩
        compress:true,
        port:3000,
        //自动打开默认浏览器
        open:true,
        //域名
        host:'localhost',
        //开启HMR功能
        hot:true,
        //不要显示启动服务器日志信息
        clientLogLevel:'none',
        //除了一些基本启动信息以外，其他内容都不要显示
        quiet:true,
        //如果出错了，不要全屏提示
        overlay:false,
        //服务器代理-->解决开发环境跨域问题
        proxy:{
            //一旦devServer(5000)服务器接收到 /api/xxx 的请求,就会吧请求转发到另外一个服务器(3000)
            '/api':{
                target:'http://localhost:3000',
                //发送请求时,请求路径重写:将 /api/xxx -> /xxx (去掉/api)
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}